<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>原生 JavaScript 下雪效果</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #333;
            font-family: Arial, sans-serif;
        }

        .flake {
            position: absolute;
            color: white;
            font-size: 1.5em;
            user-select: none;
            pointer-events: none;
            animation: fall 5s linear infinite;
        }

        @keyframes fall {
            from {
                transform: translateY(-100vh);
                opacity: 1;
            }
            to {
                transform: translateY(100vh);
                opacity: 0;
            }
        }
    </style>
</head>
<body>
<script>
    const MAX_FLAKES = 50; // 设置最大雪花数量
    let flakeCount = 0; // 当前雪花数量
    const flakes = []; // 存储雪花元素的数组

    // 创建雪花
    function createSnowflake() {
        if (flakeCount >= MAX_FLAKES) {
            // 如果雪花数量达到最大值，则移除最旧的雪花
            const oldestFlake = flakes.shift();
            oldestFlake.remove();
        }
        const flake = document.createElement('div');
        flake.className = 'flake';
        flake.style.left = `${Math.random() * 100}vw`;
        flake.style.fontSize = `${20 + Math.random() * 30}px`;
        flake.innerText = '❄';

        document.body.appendChild(flake);

        // 添加到雪花数组并增加计数
        flakes.push(flake);
        flakeCount++;

        // 雪花落下后移除
        flake.addEventListener('animationend', () => {
            flake.remove();
            flakeCount--;
            const index = flakes.indexOf(flake);
            if (index > -1) {
                flakes.splice(index, 1);
            }
        }, {once: true});
    }

    // 每隔一段时间创建一个雪花
    setInterval(createSnowflake, 300);
</script>
</body>
</html>